<template>
  <cjui-page-panel header="Icon 自定义注册图标">
    <template #intro>
      <span>自定义注册图标。如果你处于本地开发环境，可访问</span> <el-link type="primary" @click="openIconDocs">辅助文档|图标</el-link> <span>查看一些推荐的其它图标库，并复制相关代码选择性引入到系统中。</span>
    </template>

    <div class="flex flex-wrap">
      <div v-for="icon in icons" :key="icon.name" class="mr-24px mt-12px mb-12px text-center">
        <cjui-icon :icon="icon.name" :size="32" />
        <div class="text-12px color-[var(--el-text-color-secondary)]">{{ icon.name }}</div>
      </div>
    </div>
  </cjui-page-panel>
</template>

<script lang="ts" setup>
import icons from '@/plugins/svgIcon/icons-custom'

const openIconDocs = () => {
  window.open('/cjui-admin-vue3/views-dev/icon')
}
</script>

<style lang="scss" scoped>
.el-link {
  vertical-align: unset;
}
</style>
